<script setup lang="ts">
import { h, onMounted, ref, watch } from 'vue';

import { useUserStore } from '@vben/stores';

import { Button, message } from 'ant-design-vue';

import { useVbenForm, z } from '#/adapter/form';
import { updateUser } from '#/api';

const userStore = useUserStore();
const loading = ref<boolean>(false);
  const userGenderOptions = [
  { label: '未设置', value: '' },
  { label: '男', value: '男' },
  { label: '女', value: '女' },
];
const roleOptions = ref<{ code: string; name: string }[]>([]);

const userStatusOptions = [
  { label: '未知', value: 0 },
  { label: '禁用', value: 1 },
  { label: '启用', value: 2 },
  { label: '删除', value: 3 },
];
const [BasicForm, formApi] = useVbenForm({
  wrapperClass: 'grid-cols-1 w-[50%]', // 24栅格,
  commonConfig: {
    formItemClass: 'col-span-1',
    labelWidth: 60,
  },
  showDefaultActions: false,
  submitButtonOptions: {
    content: '更新信息',
  },
  resetButtonOptions: {
    show: false,
  },
  schema: [
    {
      component: 'Input',
      fieldName: 'id',
      dependencies: {
        show: false, // 靠这个来隐藏表单
        triggerFields: ['id'],
      },
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入名称',
      },
      fieldName: 'realName',
      label: '名称',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入账户名(字母和数字)',
      },
      fieldName: 'username',
      label: '账户名',
      rules: z.string().regex(/^[A-Z0-9]+$/i, { message: '账户名只能包含字母和数字' }),
    },
    {
    component: 'RadioGroup',
    componentProps: {
      buttonStyle: 'solid',
      options:userGenderOptions,
      optionType: 'button',
    },
    defaultValue: 1,
    fieldName: 'gender',
    label: '性别',
  },
  {
    component: 'RadioGroup',
    componentProps: {
      buttonStyle: 'solid',
      options:userStatusOptions,
      optionType: 'button',
    },
    defaultValue: 1,
    fieldName: 'status',
    label: '状态',
  },
    {
      component: 'Select',
      componentProps: {
        mode:"multiple",
        options: roleOptions,
        placeholder: '请选择角色',
        multiple: true,
      },
      fieldName: 'roles',
      label: '角色列表',
      rules: 'required',
    },
    {
      fieldName: 'btn',
      label: '',
      component: () => {
        return h(
          'div',
          {},
          h(
            Button,
            {
              type: 'primary',
              // eslint-disable-next-line no-use-before-define
              onClick: handleSubmit.bind(null),
              loading: loading.value,
            },
            {
              default() {
                return '更新信息';
              },
            },
          ),
        );
      },
      componentProps: {},
      formItemClass: 'col-span-1',
    },
  ],
});
const handleSubmit = () => {
  formApi.validate().then(async (e: any) => {
    if (e.valid) {
      const values = await formApi.getValues();
      loading.value = true;
      updateUser(values.id,values)
        .then(() => {
          message.success('保存成功');
          userStore.setUserInfo({
            ...userStore.userInfo,
            ...values,
          } as any);
        })
        .finally(() => {
          loading.value = false;
        });
              
    }
  });
};
onMounted(() => {
  formApi.setValues(userStore.userInfo || {});
});
</script>
<template>
  <BasicForm />
</template>
<style lang="less" scoped></style>
